@import 'variables.scss';
@import '_table.scss';
.pkl-records-head {
    height: 17rem;
    border-bottom: $borderStyle;
    background: #fff;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    position: relative;

    .pkl-records-headimg {
        width: 11rem;
        padding: 1.5rem;
        display: -webkit-flex;
        -webkit-flex-direction: column;
        -webkit-align-items: center;

        img {
            width: 7rem;
            height: 7rem;
            border-radius: 50%;
        }

        .username {
            font-size: 1.2rem;
            margin-top: .8rem;
        }

        .platform {
            padding: .2rem .8rem;
            border: 1px solid black;
            margin-top: 1rem;
            color: $deep-color;
        }
    }

    .pkl-records-statistics {
        padding: 1.5rem;
        display: -webkit-flex;
        -webkit-flex-direction: column;

        li {
            margin: .75rem 0;
            list-style: none;
            display: inherit;
            font-size: 1.2rem;

            .value {
                margin-left: 1rem;
                color: rgb(39, 143, 238);
            }

            .progress {
                width: 20rem;
                text-align: left;
                background: $deep-color;
                color: #fff;
                height: 2rem;
                display: -webkit-flex;
                -webkit-flex-direction: row;
                -webkit-align-items: center;
                padding: 0 1rem;
                position: relative;
                transform: skew(-25deg);

                .bar {
                    position: absolute;
                    height: 2rem;
                    background: #da400a;
                    width: 51%;
                    left: 0;
                    top: 0;
                }

                .text {
                    z-index: 9;
                }
            }
        }
    }

    .pkl-records-godetail {
        position: absolute;
        right: 0px;
        padding: .5rem 1.5rem;
        top: 2rem;
        background: $deep-color;
        color: #fff;
    }
}

.pkl-records-line {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    padding: 1rem;
    font-size: 1.2rem;
    position: relative;
}

.pkl-records-history {
    display: -webkit-flex;
    border-bottom: $borderStyle;
    -webkit-flex-direction: column;

    background: #fff;
    height: 15rem;

    .pkl-records-line {
        padding: 0;
        -webkit-flex-grow: 1;
    }
    .cell {
        -webkit-flex: 1;
        display: -webkit-flex;
        border: $borderStyle;
        border-top: none;
        border-right: none;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        color: #fff;
        background: #424040;
    }

    a {
        -webkit-flex: 1;
        display: -webkit-flex;
        border: none;
    }
}
